<template>
  <div class="inOutCommoditiesCon">
    <div class="inOutCommoditiesConImg">
      <div class="inOutCommodities" :class="curIndex==i?'active':''" v-for="(item,i) in impproductlist" :key="i">
        <img class="inOutCommoditiesImg" v-if="curIndex == i&&(i%2==0)" :src="imgsrcAc"  />
         <img class="inOutCommoditiesImg" v-else-if="curIndex == i&&(i%2!=0)" :src="imgsrcAc1"  />
        <img class="inOutCommoditiesImg" v-else :src="imgsrc"  />
        <div class="inOutCommoditiesTxt">
          <span>{{i+1}}</span>
          <span>{{formatNumberRgx2(item.CLASS)}}</span>
        </div>
        <div class="inOutCommoditiesTip" :class="curIndex==i?'show':''">
          <div>单量:<span>{{formatNumberRgx(item.DANLIANG)}}</span></div>
        </div>
      </div>
    </div>
    <commoditySales :impProductData = 'curImpDetail' :className='curClass' :sy='sy' style="width: 100%;height:50%;"></commoditySales>
  </div>

</template>

<script>

  import commoditySales from '@/views/bigScreen/secTelement/commoditySales'
	export default {
		name: 'inCommodities',
		components: {
      commoditySales
		},
		data() {
			return {
          impproductlist:{},//进口大类
          imgsrc:require('../../../../static/img/kind_show.png'),
          imgsrcAc:require('../../../../static/img/kind_show_selected.png'),
          imgsrcAc1:require('../../../../static/img/kind_show_selected1.png'),
          curIndex:0,
          impProductData:{},
          curClass:'',
          imgDetail:[],
          curImpDetail:[],
          sy:''
			}
		},
		mounted() {
      this.getEchartData();
      let _this = this;
      setInterval(() => {
        if( _this.curIndex<_this.impproductlist.length-1){
          _this.curIndex+=1;
        }else{
          _this.curIndex = 0
        }
       
        _this.sy = (_this.curIndex+1)%2;
        _this.sy = _this.sy.toString();
       _this.curClass = _this.impproductlist[_this.curIndex].CLASS;
       _this.curImpDetail = _this.imgDetail[ _this.curClass];
      }, 15000);
		},
		methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
       formatNumberRgx2(num) {
        var part = num.substring(0,2);
        if(part == '一次'){
          part = '卫生品';
        }else if(part == '鞋、'){
          part = '鞋、帽';
        }
        return part;
      },
			getEchartData() {
        const inOutCommodities = this.$refs.inOutCommodities;
        //进出口商品大类
       var _this = this;
        /*申报/通关*/
         this.$myHttp.post("getGoodClassInfo")
        	.then(function(data0) {
        		if(data0.status == "200") {
             var impClasses=[];
            	if(data0.data.hn_productclass&&data0.data.hn_productclass.imp){ //进口数据
            		var minImpValue=-1;
                var danwei = "包";
                data0.data.hn_productclass.imp.forEach((item,index)=>{

                })
              _this.impproductlist = data0.data.hn_productclass.imp;
              _this.imgDetail = data0.data.hn_productclass.impDetail;
              _this.curClass = data0.data.hn_productclass.imp[0].CLASS;
              _this.sy = '1';
            //  _this.curImpDetail = data0.data.hn_productclass.imgDetail[ _this.curClass]

               _this.curImpDetail = data0.data.hn_productclass.impDetail[_this.curClass]
            	}
            }

           })
          /*
				if(inOutCommodities) {
					const myChart = this.$echarts.init(inOutCommodities)

					const option = {};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}*/
			},

		}
	}
</script>

<style scoped>
	.inOutCommoditiesCon{
    width: 98%;
    padding:0 1%;
    height: 100%;
  }
  .inOutCommoditiesConImg{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .inOutCommodities{
    width:25% ;
    height: 40%;
    position: relative;
    margin-bottom:5%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .inOutCommodities img{

   }
  .inOutCommoditiesTxt{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    flex-direction: column;
  }
  .inOutCommoditiesTxt>span:nth-of-type(1){
    font-size: .12rem;
    line-height:.4rem;
    margin-top: -.1rem;
  }
  .inOutCommoditiesTxt>span:nth-of-type(2){
    font-size: .12rem;
    /* white-space: nowrap;*/
    overflow: hidden;
    /* text-overflow: ellipsis; */
    width: 100%;
    text-align: center;
  }
  .inOutCommoditiesImg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: .62rem;
    height: .62rem;
  }
  .inOutCommoditiesTip{
    width: 100%;
    line-height: .28rem;
    max-height:.56rem;
    position: absolute;
    right:0;
    bottom:  -.22rem;
    margin: 0 auto;
    display:none;
    word-wrap:break-word;
    background: url(../../../../static/img/hover_bg.png);
    background-size: 100% 100%;
  }
  .inOutCommoditiesTip>div{

    color: #fff;
    font-size: .12rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inOutCommoditiesTip>img{
    width: 100%;
    height: 100%;
  }
  .inOutCommoditiesTip>div>span{
    color: #5efffb;
    font-size: .12rem;
  }
 .show{
    display:block;
 }
</style>
